﻿<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
		<title>空间数据编码</title>
		<style>
			body {
				width: 1000px;
				margin: 0 auto;
				position: relative;
				border-left: 3px solid black;
				border-right: 3px solid black;
			}
			header, footer {
				background-color: #6991c7;
				border-top: 3px solid black;
				border-bottom: 3px solid black;
			}
			header {
				height: 50px;
			}
			main {
				background-color: #bac8e0;
			}
			footer {
				height: 40px;
				clear: both;
			}
			h2, h3 {
				line-height: 1;
				margin: 10px 0 10px 0;
				font-family: "楷体";
				text-align: center;
			}
			h2 {
				font-size: 30px;
			}
			h3 {
				font-size: 20px;
			}
			.navCont, .canvasCont, .changeALLCont, .changeSimCont {
				padding: 0 auto;
				margin: 0 auto;
				text-align: center;
				font-family: "仿宋";
				font-weight: bold;
				font-size: 22px;
				line-height: 2;
			}
			.canvasCont {
				clear: both;
				padding-bottom: 10px;
				position: relative;
				top: 10px;
			}
			.navCont select {
				font-family: "仿宋";
				font-weight: bold;
				font-size: 18px;
			}
			.changeALLCont button, .changeSimCont button {
                display: inline;
                line-height: 1.5;
                font-family: "仿宋";
                font-weight: bold;
                font-size: 16px;
                text-align: center;
                border: 1px solid black;
                margin: 0 auto;
            }
			.changeALLCont button:hover, .changeSimCont button:hover {
				color: white;
                background-color: rgba(0,0,0,0.5);
			}
			.changeSimCont div {
				text-align: center;
				width: 50%;
			}
			.changeSimCont #d1 {
				float: left;
			}
			.changeSimCont #d2 {
				float: right;
			}
			.canvasCont {
				clear: both;
			}
		</style>
    </head>
    <body onload="drawGrid(myCanvas); drawGrid(myCanvas2);">
        <header>
		    <h2>空间数据编码</h2>
        </header>			
        <main>
            <div class="navCont">
			    <a>变换类型</a>
			    <select id="changeChoose">
			        <option value="normal">正常</option>
			    </select>
			    <a>字体颜色</a>
			    <select id="fontColor">
				    <option value="red">红色</option>
				    <option value="green">绿色</option>
				    <option value="blue">蓝色</option>
		        </select>
		        <a>字体线宽</a>
			    <select id="lineWidth">
				    <option value="3">三倍</option>
				    <option value="5">五倍</option>
				    <option value="7">七倍</option>
			    </select>
			    <a>格网数量</a>
			    <select id="gridNumber">
					<option value="16">一六</option>
			        <option value="12">一二</option>
				    <option value="20">二零</option>
			        <option value="24">二四</option>
			    </select>
			</div>
			
			<div class="changeALLCont">
				<button id="renewAllCanvas" onclick="main(myCanvas,number,cX,cY);main(myCanvas2,number2,cX2,cY2)">刷新所有画布</button>
				<button id="deleteAllCanvas" onclick="clearCanvas(myCanvas);clearCanvas(myCanvas2)">清空所有画布</button>
			</div>

			<div class="changeSimCont">
			<div id="d1">
				<input id="fileInput" type="file" style="visibility: hidden; position: relative; width: 0;" onchange="newData1(fileInput);">
				<button type="button" onclick="fileInput.click();">加载数据1</button>
				<button type="button" onclick="main(myCanvas,number,cX,cY);">刷新画布1</button>
				<button type="button" onclick="clearCanvas(myCanvas);">清空画布1</button>
			</div>
			<div id="d2">
				<input id="fileInput2" type="file" style="visibility: hidden; position: relative; width: 0;" onchange="newData2(fileInput2);">
				<button type="button" onclick="fileInput2.click();">加载数据2</button>
				<button type="button" onclick="main(myCanvas2,number2,cX2,cY2);">刷新画布2</button>
				<button type="button" onclick="clearCanvas(myCanvas2);">清空画布2</button>
			</div>
			</div>

            <div class="canvasCont">			
			    <canvas id="myCanvas" width="480" height="480" style="border:1px solid black"  >your browser does not support the canvas tag </canvas>
			    <canvas id="myCanvas2" width="480" height="480" style="border:1px solid black"  >your browser does not support the canvas tag </canvas>
			</div>
			<script>
			    function newData1(fileId){
				   //画布一对应文件全局变量
			       cX=new Array();
                   cY=new Array();
				   number=new Array();
				   data1=null;
				   getData(fileId,data1,number);
				}
				
			    function newData2(fileId){
				   //画布二对应文件全局变量
				   cX2=new Array(); 
                   cY2=new Array(); 
				   number2=new Array();
				   data2=null;
				   getData(fileId,data2,number2);
				}

				function getData(fileId,DATA,NUMBER){
					var file=fileId.files[0];
					var reader=new FileReader();
					reader.readAsText(file);
					reader.onload=function(e) {
						DATA=reader.result;
						getPoint(DATA,NUMBER);
					}
				}
				
				//主函数
                function main(canvasid,NUMBER,changeX,changeY){
                    clearCanvas(canvasid);
                    drawGrid(canvasid);
                    drawName(NUMBER,canvasid,changeX,changeY);					
                }

				//绘制网格
				function drawGrid(canvasid){                   
                    var cxt=canvasid.getContext("2d"); 
					cxt.lineWidth=1;
					cxt.strokeStyle = 'gray';
					var gridNum=parseInt(document.getElementById("gridNumber").value);
					var maxGridNum=24;  //根据画布大小和单元网格边长确定的画布能够容纳的最大网格数量
					var tempXY=(maxGridNum-gridNum)*10;   //网格左下角对应XY
					var gridSize=20;    //单元格边长
					var borderXY=gridNum*gridSize+tempXY; //网格右边对应XY
					for(x=tempXY,y=tempXY;y<=borderXY;y+=gridSize){
					    cxt.beginPath();
					    cxt.moveTo(x,y);
					    cxt.lineTo(borderXY,y);
						cxt.stroke();
					}		
                    for(x=tempXY,y=tempXY;x<=borderXY;x+=gridSize){		
                        cxt.beginPath();					
					    cxt.moveTo(x,y);
					    cxt.lineTo(x,borderXY);				
						cxt.stroke();
					}	   
				}

				//销毁画布
				function clearCanvas(canvasid){  
                    var cxt=canvasid.getContext("2d");  
                    canvasid.height=canvasid.height;  
                }
				
                //提取数字，并存入数组
                function getPoint(DATA,NUMBER){
                    var str=DATA;
					var numcharacter="";
					var i=0;
					var flag=0;
					var character=str[flag];
					while(character!=null) {
						if(character=="E") {
							flag+=5;
							character=str[flag];
						}
                        else {
							while(character!="\n") {
								character=str[++flag];
							} //while2
							character=str[++flag];
							while(character!="E") {
								while(character!=",") {
									numcharacter+=character;
									character=str[++flag];
								} //while4
								character=str[++flag];
								NUMBER[i++]=parseFloat(numcharacter);
								numcharacter="";
								while(character!="\n") {
									numcharacter+=character;
									character=str[++flag];
								} //while5
								character=str[++flag];
								NUMBER[i++]=parseFloat(numcharacter);
								numcharacter="";
                            } //while3
                            NUMBER[i++]=-1;
							flag+=5;
							character=str[flag];
						} //else
					} //while1			
                    return NUMBER;	
                }
			   
                function drawName(NUMBER,canvasid,changeX,changeY){
                    var cxt=canvasid.getContext('2d'); 
					var n=NUMBER.length;
					var whichChange=document.getElementById("changeChoose").value;
					cxt.lineWidth=parseInt(document.getElementById("lineWidth").value);
					cxt.strokeStyle=document.getElementById("fontColor").value;
					
					//用于最终绘图
				    var x=new Array();
                    var y=new Array();
					
					//字体中心点坐标
				    var xf=240;  
				    var yf=240;
					
				    //二次提取坐标点并放入全局变量中，之后每次除左斜和耸肩变换外都将变化后的坐标存储在其中
                    if(changeX.length==0&&changeY.length==0){
					    for(var i=0,j=0,c=0;i<n;i++){
							if(NUMBER[i]!=-1){
                                x[j]=NUMBER[i];
								changeX[c]=x[j];
                                y[j]=480-NUMBER[++i];
								changeY[c]=y[j];
								c++;
                                j++;
                            }
							
						    else{
								changeX[c]=-1;
							    changeY[c++]=-1;
                                j=0;
                            }
                        }
					}
					
				    if(whichChange=="normal"){
					    var shangyiSize=20;
						//这一相同循环作用是能够从其他变换回到正常状态
						for(var i=0,j=0,c=0;i<n;i++){
							if(NUMBER[i]!=-1){
                                x[j]=NUMBER[i];
								changeX[c]=x[j];
                                y[j]=480-NUMBER[++i];
								changeY[c]=y[j];
								c++;
                                j++;
                            }
						    else{
								changeX[c]=-1;
							    changeY[c++]=-1;
                                j=0;
                            }
                        }
						
		                for(var i=0,j=0;i<changeX.length;i++){
						    if((changeX[i]!=-1)&&(changeY[i]!=-1)){
						        x[j]=changeX[i];
								changeX[i]=x[j];
							    y[j]=changeY[i];
							    changeY[i]=y[j];
								j++;
							}
							else{
							    cxt.beginPath();
                                cxt.moveTo(x[0],y[0]);
                                for(var k=1;k<j;k++){
                                    cxt.lineTo(x[k],y[k]);
                                }   
                                cxt.stroke();
                                j=0;
                            }
                        }	
				    }
                }
            </script>
        </main>
        <footer>
			<h3>10170312<h3>
        </footer>		
    </body>  
</html> 
